<template>
    <div class="app-container">
        <div class="customContainer">
            <!-- 头 -->
            <div class="customHeader">
                <div class="pull-left">
                    {{machineInfo.store_name}}&#x3000;{{machineInfo.area_name}}&#x3000;{{machineInfo.machine_type}}&#x3000;机台编号：{{machineInfo.no}}&#x3000;机台ID：{{machineInfo.machine_id}}
                </div>
                <span class="pull-right">
                    <el-button type="primary" size="small" @click="addClick()">新增卡头</el-button>
                </span>
            </div>
            <!-- 列表 -->
            <el-table highlight-current-row :data="list" v-loading.body="listLoading" border size="small"
                :key="$route.params.machine_id">
                <el-table-column align="center" label='会员价'>
                    <template slot-scope="scope">
                        <el-input onkeypress="return event.which<=57" type="number" onmousewheel="return false;"
                            v-model="scope.row.coins_sell_vip" size="small"></el-input>
                    </template>
                </el-table-column>
                <el-table-column align="center" label='非会员价'>
                    <template slot-scope="scope">
                        <el-input onkeypress="return event.which<=57" type="number" onmousewheel="return false;"
                            v-model="scope.row.coins_sell" size="small"></el-input>
                    </template>
                </el-table-column>
                <el-table-column align="center" label='星星数'>
                    <template slot-scope="scope">
                        <el-input onkeypress="return event.which<=57" type="number" onmousewheel="return false;"
                            v-model="scope.row.stars" size="small"></el-input>
                    </template>
                </el-table-column>
                <el-table-column align="center" label='脉冲数'>
                    <template slot-scope="scope">
                        <el-input onkeypress="return event.which<=57" type="number" onmousewheel="return false;"
                            v-model="scope.row.pulse" size="small"></el-input>
                    </template>
                </el-table-column>
                <el-table-column align="center" label='次数'>
                    <template slot-scope="scope">
                        <el-input onkeypress="return event.which<=57" type="number" onmousewheel="return false;"
                            v-model="scope.row.times" size="small"></el-input>
                    </template>
                </el-table-column>
                <el-table-column align="center" label='扫码套餐'>
                    <template slot-scope="scope">
                        <el-select v-model="scope.row.combo_id" size="small">
                            <el-option v-for="item in package_list" :key="item.id" :label="item.name" :value="item.id">
                            </el-option>
                        </el-select>
                    </template>
                </el-table-column>
                <el-table-column align="center" label='关联礼品'>
                    <template slot-scope="scope">
                        <el-select v-model="scope.row.is_gift_mapping" size="small">
                            <el-option key="0" label="不支持" value="0"></el-option>
                            <el-option key="1" label="支持" value="1"></el-option>
                        </el-select>
                    </template>
                </el-table-column>
                <el-table-column align="center" label='备注'>
                    <template slot-scope="scope">
                        <el-input placeholder="选填" v-model="scope.row.remark" size="small"></el-input>
                    </template>
                </el-table-column>
                <!-- 列表的操作按钮 -->
                <el-table-column align="center" label="操作" width="80">
                    <template slot-scope="scope">
                        <el-button :disabled="scope.$index==0" @click="delClick(scope.$index)" type="danger"
                            icon="el-icon-delete" size="mini"></el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <!-- 自定义底部 -->
        <div class="bottom_box">
            <el-button class="pull-right" type="primary" size="small" @click="saveClick()">保存并返回</el-button>
        </div>
    </div>
</template>

<script>
    import {
        getList,
        get_package,
        batch_create_clevice
    } from "@/api/information/deployclevice";
    import { num1to255,nullOr1to255, integer1to999999999 } from '@/utils/validate'
    export default {
        data() {
            return {
                listLoading: false,
                machineInfo: {},
                package_list: [],
                default_list: {
                    coins_sell_vip: "",
                    coins_sell: "",
                    pulse: "",
                    remark: "",
                    is_gift_mapping: "",
                    combo_id: '',
                    stars:"",
                    times:""
                },
                list: [],
                saveForm: {
                    machine_id: this.$route.params.machine_id,
                    list: []
                },
                formInline: { machine_id: this.$route.params.machine_id },
            };
        },
        created() {
            this.fetchData();
        },
        watch: {
            '$route'(to, from) {
                if (this.$route.params.machine_id && this.$route.params.machine_id != this.formInline.machine_id || this.$route.params.routerflag) {
                    this.formInline.machine_id = this.$route.params.machine_id;
                    this.saveForm.machine_id = this.$route.params.machine_id;
                    this.fetchData();
                }
            }
        },
        methods: {
            getPackage() {
                get_package({ all: 1, brand_id: this.machineInfo.brand_id }).then(response => {
                    response.unshift({ id: '0', name: '不支持' });
                    this.package_list = response
                });
            },
            // 提交
            saveClick() {
                this.saveForm.list = JSON.parse(JSON.stringify(this.list))
                let ok = true;
                let okStars = true;
                let okTimes = true;
                this.saveForm.list.forEach(val => {
                    if (!num1to255(val.coins_sell) || !num1to255(val.coins_sell_vip) || !num1to255(val.pulse) || !val.is_gift_mapping || !val.combo_id) {
                        ok = false;
                        return false;
                    }else if(!nullOr1to255(val.stars)){
                        okStars = false;
                        return false;
                    }else if (val.times !='' && !integer1to999999999(val.times)) {
                        okTimes = false;
                        return false;
                    }
                });
                if (!ok) {
                    this.$message({ type: 'error', message: '请将所有信息填写完整,1-255整数(会员价,非会员价,脉冲数,扫码套餐,关联礼品为必填项)' });
                    return;
                }
                if(!okStars){
                    this.$message({ type: 'error', message: '请将所有信息填写完整,1-255整数(星星数可不填)' });
                    return;
                }
                if(!okTimes){
                    this.$message({ type: 'error', message: '请将所有信息填写完整,次数大于0(可不填)' });
                    return;
                }
                this.$confirm('确认保存并返回', '提示', { type: 'warning' }).then(() => {
                    batch_create_clevice(this.saveForm).then(response => {
                        this.$message({ type: response.code == 1 ? 'success' : 'error', message: response.message });
                        if (response.code == 1) {
                            this.$store.dispatch('delVisitedViews', this.$route).then((views) => {
                                this.$router.push({
                                    name: 'information/deployclevice',
                                    params: {
                                        brand_id: this.$route.params.brand_id,
                                        store_id: this.$route.params.store_id,
                                        machine_id: this.$route.params.machine_id,
                                        routerflag: 1
                                    },
                                })
                            })
                        }
                    });
                })
            },
            addClick() {
                this.list.push(JSON.parse(JSON.stringify(this.list[this.list.length - 1])))
            },
            // 删除按钮
            delClick(index) {
                this.list.splice(index, 1);
            },
            // 列表获取
            fetchData() {
                this.list = [];
                this.list.push(JSON.parse(JSON.stringify(this.default_list)))
                getList(this.formInline).then(response => {
                    this.machineInfo = response.machine;
                    this.getPackage();
                    this.listLoading = false;
                }).catch(res=>{
                    this.listLoading=false;
                })
            },

        }
    };
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
    .el-table {
        margin: 0;

        .el-input {
            max-width: 100px;
        }
    }
</style>